<template>
  <div>
    <ay-aside :page-info="pageInfo" />
    <div class="app-container">
      <div class="filter-container">

        <el-collapse v-model="filterNameKey" @change="handleChange">
          <el-collapse-item title="筛选条件" name="1">
            <el-row>
              <el-input v-model="search.title" placeholder="商品标题" style="width: 200px;" class="filter-item" @change="handleSearch" />
              <el-input v-model="search.submitUserId" placeholder="用户id" style="width: 200px;" class="filter-item" />

              <el-select v-model="search.recommendId" placeholder="推荐">
                <el-option
                  v-for="item in tjArr2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>

              <el-select v-model="search.goodsStatus" placeholder="上下架状态">
                <el-option
                  v-for="item in tjArr3"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>

              <el-date-picker
                v-model="submitTimeTemp"
                class="filter-item"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-row>
            <el-checkbox v-model="search.cdKey">不看CDKEY</el-checkbox>
          </el-collapse-item>
        </el-collapse>

        <p />

        <el-button v-waves class="filter-item refresh-btn" icon="el-icon-refresh" @click="handleRefresh" />

        <el-button v-show="isShowFilterBtn" v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleSearch">
          搜索
        </el-button>
        <el-button v-show="isShowFilterBtn" v-waves class="filter-item" type="danger" icon="el-icon-close" @click="handleReset">
          重置
        </el-button>

        <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">
          新增
        </el-button>

        <el-button v-waves class="filter-item" type="danger" icon="el-icon-refresh" :disabled="disabledDelBtn" @click="handleAllRefresh(delIdArr)">
          刷新
        </el-button>

        <el-button v-waves class="filter-item" type="info" icon="el-icon-copy-document" :disabled="disabledDelBtn" @click="handleCopy()">
          复制
        </el-button>

      </div>
      <el-table
        ref="multipleTable"
        v-loading="listLoading"
        :data="tableData"
        fit
        stripe
        border
        highlight-current-row
        style="width: 100%;"
        @sort-change="sortChange"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="30"
        />
        <el-table-column label="id" min-width="30px">
          <template slot-scope="{row}">
            <span>{{ row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户Id" min-width="50px">
          <template slot-scope="{row}">
            <span @click="handleSearchUserId(row.userId)">{{ row.userId }}  / {{ row.nikeName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="标题" min-width="100px">
          <template slot-scope="{row}">
            <a :href="'https://www.fhyx.com/c2c/'+row.id+'.html'" target="_blank">
              <span>{{ row.title }}</span>
            </a>

          </template>
        </el-table-column>

        <el-table-column label="删除" align="center" class-name="status-col" width="50">
          <template slot-scope="{row}">
            <el-tag :type="row.delFlag == 1? 'info': 'success'">
              {{ row.delFlag == 1? '×': '√' }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="状态" align="center" class-name="status-col" width="60">
          <template slot-scope="{row}">
            <el-tag :type="row.goodsStatus == 0? 'info': 'success'">
              {{ row.goodsStatus == 0? '下架': '上架' }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="卖出" align="center" class-name="status-col" width="80">
          <template slot-scope="{row}">
            <el-tag :type="row.saleStatus == 0? 'info': 'success'">
              {{ row.saleStatus == 0? '未卖出': '已卖出' }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="售价" min-width="50px" sortable="'custom'" prop="salePrice">
          <template slot-scope="{row}">
            <span>{{ row.salePrice }}</span>
          </template>
        </el-table-column>

        <el-table-column label="pv" min-width="40px" sortable="'custom'" prop="viewNum">
          <template slot-scope="{row}">
            <span>{{ row.viewNum }}</span>
          </template>
        </el-table-column>

        <!--
    <el-table-column label="推荐/排序"  sortable="'custom'"   prop="recommendId" >
          <template slot-scope="{row}">
            <span>{{ tjArr1[row.recommendId] }}/{{ row.recommendOrder }}</span>
          </template>
        </el-table-column>

       -->
        <el-table-column label="关键词" min-width="40px">
          <template slot-scope="{row}">
            <span>{{ !row.keyword ? "否": "有" }}</span>
          </template>
        </el-table-column>

        <el-table-column label="创建时间" align="center" width="100px">
          <template slot-scope="{row}">
            <span>{{ row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="修改时间" align="center" width="100px">
          <template slot-scope="{row}">
            <span>{{ row.updateTime }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="300" class-name="small-padding fixed-width">
          <template slot-scope="{row}">

            <el-tooltip content="刷新" placement="top" effect="light">
              <el-button type="primary" icon="el-icon-refresh" size="small" @click="refresh(row.id)" />
            </el-tooltip>

            <el-tooltip content="推荐" placement="top" effect="light">
              <el-button type="primary" icon="el-icon-thumb" size="small" @click="handleTj(row.id,row.recommendId)" />
            </el-tooltip>

            <el-tooltip v-if="row.goodsStatus == 0" content="上架" placement="top" effect="light">

              <el-button type="success" icon="el-icon-success" size="small" @click="handleUp(row.id)" />
            </el-tooltip>

            <el-tooltip v-if="row.goodsStatus == 1" content="下架" placement="top" effect="light">
              <el-button type="danger" icon="el-icon-error" size="small" @click="handleDown(row.id)" />
            </el-tooltip>

            <el-tooltip content="查看详情" placement="top" effect="light">
              <el-button type="primary" icon="el-icon-view" size="small" @click="handleUpdate(row)" />
            </el-tooltip>

            <el-tooltip content="删除" placement="top" effect="light">
              <el-button type="danger" icon="el-icon-delete" size="small" @click="handleDelete([row.id])" />
            </el-tooltip>

          </template>
        </el-table-column>

      </el-table>
      <pagination v-show="pageTotal > 0" :total="pageTotal" :page.sync="pageNum" :limit.sync="pageSize" @pagination="getList" />

      <el-dialog :close-on-click-modal="false" :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
        <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="100px" style="width: 400px; margin-left:50px;">


         <el-form-item label="编辑/复制：" prop="isUpdate">
            <el-radio v-model="isUpdate" label="0">编辑</el-radio>
            <el-radio v-model="isUpdate" label="1">复制</el-radio>
          </el-form-item>





          <el-form-item label="是否全新：" prop="isNew">

            <el-radio v-model="temp.isNew" label="0">非全新</el-radio>
            <el-radio v-model="temp.isNew" label="1">全新</el-radio>

          </el-form-item>

          <el-form-item label="所属分类：" prop="roleid">
            <el-cascader v-model="temp.relations" :options="typeList" clearable filterable check-strictly :props="{ checkStrictly: true }" @change="handleItemChange" />

          </el-form-item>

          <el-form-item label="商品：" prop="type">
            <el-select v-model="temp.goodsId" filterable placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="标题：" prop="title">
            <el-input v-model="temp.title" placeholder="输入标题" />
          </el-form-item>

          <el-form-item label="关键词：" prop="title">
            <el-input v-model="temp.keyword" placeholder="关键词" />
          </el-form-item>

          <el-form-item label="库存：" prop="stockNum">
            <el-input-number v-model="temp.stockNum" :min="1" :max="100" placeholder="库存：" />
          </el-form-item>
          <el-form-item label="售卖价格：" prop="salePrice">
            <el-input v-model="temp.salePrice" placeholder="售卖价格" />
          </el-form-item>

          <el-form-item label="商品原价：" prop="originalPrice">
            <el-input v-model="temp.originalPrice" placeholder="商品原价" />
          </el-form-item>

          <el-form-item label="物流费用：" prop="expressPrice">
            <el-input v-model="temp.expressPrice" placeholder="物流费用" />
          </el-form-item>

          <el-form-item label="省：" prop="province">
            <el-input v-model="temp.province" placeholder="省" />
          </el-form-item>
          <el-form-item label="市：" prop="city">
            <el-input v-model="temp.city" placeholder="市" />
          </el-form-item>

          <el-form-item label="售卖用户：" prop="nikeName">
            <el-input v-model="temp.nikeName" :disabled="true" placeholder="售卖用户昵称" />
          </el-form-item>
          <el-form-item label="售卖用户Id" prop="submitUserId">
            <el-input v-model="temp.submitUserId" placeholder="售卖用户Id" />


              <el-select v-model="temp.submitUserId" placeholder="请选择">
                <el-option
                  v-for="item in userOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </el-form-item>





          <el-form-item label="用户头像：" prop="avatar">
            <img :src="temp.avatar" width="120" class="head_pic">
          </el-form-item>

          <el-form-item label="图片：" class="store-form-item">
            <div class="store-box">
              <el-upload
                :action="uploadPath"
                :limit="9"
                :on-success="handleAvatarSuccess"
                :on-remove="handleRemove"
                list-type="picture-card"
                :file-list="temp.fileListEnvironment"
                :disabled="false"
                :multiple="true"
                :on-preview="handlePictureCardListPreview"
              >
                <i class="el-icon-plus" />
              </el-upload>
            </div>
          </el-form-item>

          <el-form-item label="详细描述：" prop="detail">
            <el-input
              v-model="temp.detail"
              type="textarea"
              placeholder="详细描述："
              :autosize="{ minRows: 12, maxRows: 24}"
            />
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">
            取消
          </el-button>
          <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
            确认
          </el-button>

        </div>
      </el-dialog>

      <el-dialog :visible.sync="dialogPcitureVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
      <el-dialog
        title="提示"
        :visible.sync="dialogDelVisible"
        width="30%"
      >

        <el-input v-model="reason" placeholder="请输入原因" />
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogDelVisible = false">取 消</el-button>
          <el-button type="primary" @click="deleteData">确 定</el-button>
        </span>

      </el-dialog>

      <el-dialog
        title="提示"
        :visible.sync="dialogTjVisible"
        width="30%"
      >

        <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="100px" style="width: 400px; margin-left:50px;">

          <el-form-item label="推荐位置" prop="tjType">
            <el-select v-model="tjType" placeholder="请选择">
              <el-option
                v-for="item in tjArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="排序" prop="tjOrder">
            <el-input v-model="tjOrder" placeholder="排序" type="number" style="width:150px;" />
          </el-form-item>

        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogTjVisible = false">取 消</el-button>
          <el-button type="primary" @click="tjData">确 定</el-button>
        </span>
      </el-dialog>

    </div>
  </div>
</template>

<script>
import { tjInfo, getList, getPage, save, deletInfo, uploadPath, C2cGoodsStatus, C2cGoodsPage, RefreshGoods } from '@/api/c2cUserRelease'
import { deepClone } from '@/utils/index'
import waves from '@/directive/waves' // waves directive
import AyAside from '@/components/Aside'
import Pagination from '@/components/Pagination'
/** import { options } from 'dropzone'*/
export default {
  name: 'TypeList',
  components: { AyAside, Pagination },
  directives: { waves },
  filters: {},
  data() {
    return {

      options: [],
      dialogPcitureVisible: false, // 是否开启弹窗
      submitTimeTemp: '', // 提交时间中间量
      props: { // 下拉树配置项（必选）
        value: 'id',
        label: 'name',
        children: 'children',
        disabled: true,
        checkStrictly: true
      },
      search: {
        title: '', // 店铺名称
        typeList: '', // 签约状态
        submitTime: '', // 提交时间
        startTime: '',
        endTime: '',
        submitUserId: '',
        recommendId: '',
        typeId: '',
        cdKey: true,
        sort: {

        }
      },

      userOptions: [{
          value: '3466813',
          label: '我游电玩旗舰店'
        }, {
          value: '2759762',
          label: '茶小丸'
        }, {
          value: '1662346',
          label: '消失的天堂'
        }, {
          value: '3949542',
          label: 'CC游戏屋'
        }, {
          value: '3460387',
          label: '李-知恩'
        }, {
          value: '3823074',
          label: '贝爷'
        }, {
          value: '1068529',
          label: '反恐精英'
        }, {
          value: '3989998',
          label: '感受前所爱'
        }],

      tjType: '1',
      tjOrder: '0',
      tjArr1: {
        '0': '无',
        '1': '推荐1',
        '2': '推荐2',
        '3': '推荐3',
        '4': '推荐4',
        '5': '推荐5',
        '6': '推荐6',
        '7': '推荐7',
        '8': '推荐8',
        '9': '推荐9',
        '10': '推荐10',
        '11': '推荐11',
        '12': '推荐12',
        '13': '推荐13',
        '14': '推荐14',
        '15': '搜索推荐'
      },

      tjArr3: [{
        value: '0',
        label: '全部'
      }, {
        value: '1',
        label: '上架'
      }, {
        value: '2',
        label: '下架'
      }],
      tjArr2: [{
        value: '0',
        label: '全部'
      }, {
        value: '1',
        label: '推荐1'
      }, {
        value: '2',
        label: '推荐2'
      }, {
        value: '3',
        label: '推荐3'
      }, {
        value: '4',
        label: '推荐4'
      }, {
        value: '5',
        label: '推荐5'
      }, {
        value: '6',
        label: '推荐6'
      }, {
        value: '7',
        label: '推荐7'
      }, {
        value: '8',
        label: '推荐8'
      }, {
        value: '9',
        label: '推荐9'
      }, {
        value: '10',
        label: '推荐10'
      }, {
        value: '11',
        label: '推荐11'
      }, {
        value: '12',
        label: '推荐12'
      }, {
        value: '13',
        label: '推荐13'
      }, {
        value: '14',
        label: '推荐14'
      }, {
        value: '15',
        label: '搜索推荐'
      }],

      tjArr: [{
        value: '0',
        label: '无推荐'
      }, {
        value: '1',
        label: '推荐1'
      }, {
        value: '2',
        label: '推荐2'
      }, {
        value: '3',
        label: '推荐3'
      }, {
        value: '4',
        label: '推荐4'
      }, {
        value: '5',
        label: '推荐5'
      }, {
        value: '6',
        label: '推荐6'
      }, {
        value: '7',
        label: '推荐7'
      }, {
        value: '8',
        label: '推荐8'
      }, {
        value: '9',
        label: '推荐9'
      }, {
        value: '10',
        label: '推荐10'
      }, {
        value: '11',
        label: '推荐11'
      }, {
        value: '12',
        label: '推荐12'
      }, {
        value: '13',
        label: '推荐13'
      }, {
        value: '14',
        label: '推荐14'
      }, {
        value: '15',
        label: '搜索推荐'
      }],
      http: process.env.VUE_APP_BASE_API,
      isShowFilterBtn: true,
      uploadPath: '',
      filterNameKey: '1',
      reason: '',
      isClearable: true, // 下拉树可清空（可选）
      isAccordion: true, // 下拉树可收起（可选）
      typeList: [],
      disabledDelBtn: true,
      dialogIconVisible: false,
      dialogDelVisible: false,
      dialogTjVisible: false,
      pageInfo: {},
      dialogImageUrl: '', // 放大图片路径
      list: null,
      listLoading: true,
      selectList: null,
      delIdArr: [],
      isUpdate:"0",
      temp: {
        id: undefined,
        title: '',
        typeId: '',
        relations: '',
        createTime: '',
        updateTime: '',
        isNew: '0',
        delFlag: 0,
        stockNum: 1,
        keyword: '',
        pic: ''
      },
      tjId: '',
      tableData: [],
      toggleSwitch: false,
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '查看详情',
        create: '新增'
      },
      rules: {
        title: [{ required: true, message: '标题不能为空', trigger: 'change' }],
        salePrice: [{ required: true, message: '售卖不能为空', trigger: 'change' }],
        originalPrice: [{ required: true, message: '商品原价不能为空', trigger: 'change' }],
        expressPrice: [{ required: true, message: '物流费用不能为空', trigger: 'change' }],

        submitUserId: [{ required: true, message: '售卖用户Id不能为空', trigger: 'change' }],
        detail: [{ required: true, message: '详细描述不能为空', trigger: 'change' }],
        pic: [{ required: true, message: '图片不能为空', trigger: 'change' }]
      },
      userName: '',
      pageNum: 1,
      pageSize: 10,
      pageTotal: 0
    }
  },
  watch: {
    submitTimeTemp(newval, oldval) {
      if (!newval) {
        this.search.submitTime = ''
      } else {
        const start = new Date(this.submitTimeTemp[0])
        const resStartDate = start.getFullYear() + '-' + this.doTwoDate((start.getMonth() + 1)) + '-' + this.doTwoDate(start.getDate())
        const resStartTime = this.doTwoDate(start.getHours()) + ':' + this.doTwoDate(start.getMinutes()) + ':' + this.doTwoDate(start.getSeconds())
        const end = new Date(this.submitTimeTemp[1])
        const resEndDate = end.getFullYear() + '-' + this.doTwoDate((end.getMonth() + 1)) + '-' + this.doTwoDate(end.getDate())
        const resEndTime = this.doTwoDate(end.getHours()) + ':' + this.doTwoDate(end.getMinutes()) + ':' + this.doTwoDate(end.getSeconds())
        this.search.startTime = `${resStartDate} ${resStartTime}`
        this.search.endTime = `${resEndDate} ${resEndTime}`
      }
    }
  },
  created() {
    this.getList()
    this.pageInfo = this.$route.meta
  },
  mounted() {
    this.uploadPath = uploadPath
  },
  methods: {
    sortFun(a) {
      console.log(a)
    },
    handleItemChange(item) {
      if (item) { this.temp.typeId = item[item.length - 1] }
      this.getGoodsList(this.temp.typeId)
    },
    getGoodsList(id) {
      const param = {}
      Object.assign(param, {
        pageNum: 1,
        pageSize: 100,
        typeId: id
      })

      const options = []
      C2cGoodsPage(param).then((response) => {
        for (const i in response.data.list) {
          const d = response.data.list[i]
          options.push({
            value: d['id'],
            label: d['title']
          })
        }
        this.options = options
      })
    },
    // 获取表格数据接口
    getList() {
      this.listLoading = true
      return new Promise((resolve, reject) => {
        if (this.search.typeList) { this.search.typeId = this.search.typeList[this.search.typeList.length - 1] }

        const param = {}
        Object.assign(param, {

          pageNum: this.pageNum,
          pageSize: this.pageSize
        }, this.search)

        getPage(param).then(response => {
          // console.log(response)

          getList({}).then((response) => {
            this.typeList = response.data
          })
          if (response.data.list) this.list = response.data.list
          this.pageTotal = response.data.total
          this.pageSize = response.data.pageSize
          this.pageNum = response.data.pageNum
          const cloneData = deepClone(this.list)
          this.tableData = cloneData
          this.listLoading = false
          // Just to simulate the time of the request
          setTimeout(() => {
            this.listLoading = false
            resolve(true)
          }, 500)
        }).catch(error => {
          this.$message({
            message: error,
            type: 'error'
          })
          reject(false)
        })
      }
      )
    },
    // 刷新
    async handleRefresh() {
      if (await this.getList()) {
        this.$message({
          message: '刷新成功',
          type: 'success'
        })
      }
    },
    // 处理日期
    doTwoDate(s) {
      return s < 10 ? '0' + s : s
    },
    // 新增操作
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 表格选中时触发
    handleSelectionChange(selection) {
      this.delIdArr = []
      if (selection.length) {
        this.disabledDelBtn = false
        for (const i in selection) {
          this.delIdArr.push(selection[i].id)
        }
      } else {
        this.disabledDelBtn = true
      }
    },

    // 初始化表单
    resetTemp() {
      this.temp = {
        id: undefined,
        title: '',
        typeId: '',
        relations: '',
        createTime: '',
        updateTime: '',
        pic: '',
        picList: [],
        keyword: '',
        delFlag: 0,
        stockNum: 1
      }
    },
    handleReset() {
      this.search = {
        title: '', // 店铺名称
        typeList: '', // 签约状态
        submitTime: '', // 提交时间
        startTime: '',
        endTime: '',
        recommendId: '',
        typeId: '',
        sort: {

        }
      }
      this.submitTimeTemp = ''
      this.pageNum = 1
      this.getList()
    },
    // 筛选查询操作
    handleSearch() {
      this.pageNum = 1
      this.getList()
    },
    // 新增数据接口
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          var tmp = this.temp
          tmp.expressPrice = tmp.expressPrice * 100
          tmp.originalPrice = tmp.originalPrice * 100
          tmp.salePrice = tmp.salePrice * 100

          save(tmp).then((response) => {
            this.$message({
              message: '新增成功',
              type: 'success'
            })
          }).finally(() => {
            this.dialogFormVisible = false
            this.getList()
          })
        }
      })
    },
    // 编辑操作
    handleUpdate(row) {
      this.isUpdate="0"
      console.log(row, 'rrr')

      this.getGoodsList(row.typeId)

      this.temp = Object.assign({}, row) // copy obj
      this.temp.timestamp = new Date(this.temp.timestamp)
      console.log(this.temp)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true

      let resEnvironment = []
      this.temp.fileListEnvironment = []
      resEnvironment = this.temp.picList
      for (const i in resEnvironment) {
        if (resEnvironment[i] !== '') {
          this.temp.fileListEnvironment.push({ url: resEnvironment[i] })
        }
      }
    },
    // 更新数据接口
    updateData() {

      if(this.isUpdate == "1") {
        this.temp.id = "";
      }

      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          var tmp = this.temp
          tmp.expressPrice = tmp.expressPrice * 100
          tmp.originalPrice = tmp.originalPrice * 100
          tmp.salePrice = tmp.salePrice * 100

          save(tmp).then((response) => {
            this.$message({
              message: '更新成功',
              type: 'success'
            })
          }).finally(() => {
            this.dialogFormVisible = false
            this.getList()
          })
        }
      })
    },
    // 删除操作
    handleDelete(idArr) {
      this.dialogDelVisible = true
      this.delIdArr = idArr
      this.reason = ''
    },
    handleAllRefresh(idArr) {
      var that = this

      idArr.forEach(function(id) {
        that.refresh(id)
      })
    },
    handleTj(id,tjid) {
      this.dialogTjVisible = true
      this.tjId = id
      this.tjType = tjid
    },

    refresh(id) {
      RefreshGoods({ 'id': id }).then((response) => {
        this.$message({
          message: '刷新成功',
          type: 'success'
        })
      }).finally(() => {
        this.getList()
      })
    },
    handleUp(id) {
      C2cGoodsStatus({ 'id': id, 'type': 'up' }).then((response) => {
        this.$message({
          message: '更新成功',
          type: 'success'
        })
      }).finally(() => {
        this.dialogFormVisible = false
        this.getList()
      })
    },

    handleDown(id) {
      C2cGoodsStatus({ 'id': id, 'type': 'down' }).then((response) => {
        this.$message({
          message: '更新成功',
          type: 'success'
        })
      }).finally(() => {
        this.dialogFormVisible = false
        this.getList()
      })
    },

    tjData() {
      console.log(this.tjId)
      console.log(this.tjOrder)
      console.log(this.tjType)
      console.log('tttttt')

      var tmp = {
        goodsId: this.tjId,
        recommendOrder: this.tjOrder,
        recommendId: this.tjType
      }
      tjInfo(tmp).then(() => {
        this.dialogTjVisible = false
        this.$notify({
          title: '成功',
          message: '推荐成功',
          type: 'success',
          duration: 2000
        })
        this.getList()
      })
    },

    deleteData() {
      var tmp = {
        id: this.delIdArr[0],
        reason: this.reason
      }
      deletInfo(tmp).then(() => {
        this.dialogDelVisible = false
        this.$notify({
          title: '成功',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
        this.getList()
      })
    },
    handlePictureCardListPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogPcitureVisible = true
    },
    handleChange(val) {
      if (val.length === 0) {
        this.isShowFilterBtn = false
      } else {
        this.isShowFilterBtn = true
      }
    },
    sortChange(column) {
      if (column.prop === 'viewNum') {
        if (column.order === 'descending') {
          this.search.sort.viewNum = 1
        }
        if (column.order === 'ascending') {
          this.search.sort.viewNum = 0
        }
        if (column.order === null) {
          delete this.search.sort.viewNum
        }
      }

      if (column.prop === 'recommendId') {
        if (column.order === 'descending') {
          this.search.sort.recommendSort = 1
        }
        if (column.order === 'ascending') {
          this.search.sort.recommendSort = 0
        }
        if (column.order === null) {
          delete this.search.sort.recommendSort
        }
      }

      if (column.prop === 'salePrice') {
        if (column.order === 'descending') {
          this.search.sort.salePriceSort = 1
        }
        if (column.order === 'ascending') {
          this.search.sort.salePriceSort = 0
        }
        if (column.order === null) {
          delete this.search.sort.salePriceSort
        }
      }
      this.getList()
    },

    handleSearchUserId(userId) {
      this.search.submitUserId = userId
      this.handleSearch()
    },
     handleCopy(){
         this.copy(this.delIdArr.join(","));
    },

     copy(data){
        let url = data;
        let oInput = document.createElement('input');
        oInput.value = url;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象;
        console.log(oInput.value)
        document.execCommand("Copy"); // 执行浏览器复制命令
        this.$message({
          message: '复制成功',
          type: 'success'
        });
        oInput.remove()
      },


    handleRemove(file, fileList) {
      var newArr = []
      this.temp.picList.forEach(element => {
        if (element !== file.url) {
          newArr.push(element)
        }
      })
      this.temp.picList = newArr
    },

    handleAvatarSuccess(res, file) {
      if (file.name === '1.jpg') {
        this.temp.picList[0] = res.data.url
      }else if (file.name === '2.jpg') {
        this.temp.picList[1] = res.data.url
      } else {
        this.temp.picList.push(res.data.url)
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}

</script>

<style lang="scss">
.app-container {
  .el-table {
    .gray-row {
      color: #c2d2d2;
    }
  }
  .add-edit-dialog {
    .el-dialog{
      .el-dialog__body{
        height: 480px;
        overflow: auto;
      }
    }
    .store-form-item .el-form-item__content {
      display: flex;
      .store-box {
        margin-right: 20px;
        .store-uploader .el-upload {
          border: 1px dashed #d9d9d9;
          border-radius: 6px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
        }
        .store-uploader .el-upload:hover {
          border-color: #409EFF;
        }
        .store-uploader-icon {
          font-size: 28px;
          color: #8c939d;
          width: 138px;
          height: 138px;
          line-height: 138px;
          text-align: center;
        }
        .store {
          width: 138px;
          height: 138px;
          display: block;
        }
        .store-name {
          text-align: center;
          color: #8c939d;
          .zoom {
            cursor: pointer;
            padding: 6px;
          }
        }
      }
    }
  }
  .el-button--mini{
    padding: 7px;
  }
  .filter-container{
    .el-collapse {
      margin-bottom: 10px;
      .el-collapse-item {
        .el-collapse-item__header {
          font-weight: 600;
        }
      }
    }
    .filter-item {
      margin-left: 0;
      &.refresh-btn{
        background-color: #030303;
        color: azure;
      }
    }
  }
}
</style>
